<script lang="ts" setup>
import { ref, h, reactive, onMounted,onBeforeMount } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton,VxeCheckbox,VxeImage } from "vxe-pc-ui";
import { projectStatementList, getSignUrls } from "@/api/project/project";
import { ElMessage } from "element-plus";
import {
  MerchantsInfoByTaxSourcesId,
} from "@/api/welcome";
import { useRoute } from "vue-router";
const route = useRoute();
const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"))
onMounted(() => {
});
const signedOptions = ref([
  { label: "未签署", value: 0 },
  { label: "已签署", value: 1 }
]);

const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "关联项目",
    field: "projectTaskName",
    align: "center",
    minWidth: 100,
  },
  {
    title: "项目时间",
    field: "projectTaskTime",
    align: "center",
    minWidth: 100,
    showOverflow: true
  },
  {
    title: "状态",
    field: "signState",
    align: "center",
    minWidth: 100, 
    slots: {
      default: ({ row }) => {
        return `${row.signState === 1 ? '已签署' : '未签署'}`
       }
    }    
  },
  {
    title: "操作",
    field: "operate",
    align: "center",
    fixed: `right`,
    minWidth: 150,
    slots: {
      default: ({ row }) => {
        return [
          h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "查看",
              onClick() {
                getSignUrls({projectStatementId: row.projectStatementId}).then((res) => {
                  if(res){
                         row.onlineSignUrl = res.data.onlineSignUrl;
                        if(!row.onlineSignUrl){
                          ElMessage.error("查看地址不存在！");
                          return false;
                        }
                      window.open(row.onlineSignUrl, "_blank");
                    }
                })
              },
         }),
            h(VxeButton, {
              status: "primary",
              mode: "text",
              size: "mini",
              content: "签署",
              async onClick() {
                const type = await VxeUI.modal.confirm("确认是否撤回项目！");
                if (type == "confirm") {
                  editStatusMerchant({
                  id: row.id,
                  state: row.state
                  }).then((res) => {
                    if(res){
                    ElMessage.success(res.msg);
                    handleSearch();
                  }
                  });
                }
               
              }
            })
          ]
      }
    }
  }
   
];
// 筛选相关
const formRef = ref();
interface FormDataVO {
  signState: string;//验收单状态
  taxSourcesId: number | string; // 税源地 
  merchantsInfoId: number | string;
  
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    signState: '',
    merchantsInfoId: merchantsInfoId,
    taxSourcesId: taxSourcesId, 
  },
  items: [
    {
      field: "signState",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "signState" }
    },
     
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});
// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    taxSourcesId: '',
    signState:"",
    merchantsInfoId:"",  };
};
const handleSearch = () => {
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};

const handleView = (record: Recordable) => {
  
};
const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};


</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #signState="{ data }">
          <el-select clearable placeholder="请选择验收单状态" v-model="data.signState">
            <el-option
              v-for="(item, index) in signedOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template> 
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >查询</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>          
        </template>
      </vxe-form>
      <div class="mt-3">
        <el-button   type="primary" ><el-icon><Plus /></el-icon>全部签署</el-button>
      </div>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="projectStatementList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleView="handleView"
      />
    </el-card>
  </div>
</template>
<style>
</style>
